<template>
  <div>
    <el-dialog
      title="选择商品"
      :append-to-body="true"
      @close="closeDio"
      :visible="dialogTableVisible"
      width="900px"
      style="padding: 20px"
    >
      <el-row class="search_prod seaheaad">
        <el-col :span="15">
          <materialSearch
            :isAllSearch="isAllSearch"
            @sendSearch="getSearch"
          ></materialSearch>
        </el-col>
        <el-col :span="4">
          <el-button
            :loading="$store.state.isLoading"
            type="success"
            v-if="isAll"
            size="small"
            @click="addShops({ id: '0' })"
            >选择所有商品</el-button
          >
        </el-col>
      </el-row>
      <el-table
        v-if="showType == 'table'"
        v-loading="loading"
        :data="shopsList.data"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
        style="width: 99.9%"
      >
        <el-table-column label="标题" min-width="250">
          <template slot-scope="scope">
            <p>{{ scope.row.title }}</p>
            <div v-if="scope.row.label && scope.row.label.length > 0">
              <el-tag
                v-for="(label, l) in scope.row.label"
                style="margin-right: 5px; color: #ffffff; margin-left: 0"
                size="mini"
                :key="l"
                effect="dark"
                >{{ label }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="价格" min-width="150">
          <template slot-scope="scope">{{ scope.row.price }}</template>
        </el-table-column>
        <el-table-column label="库存" min-width="120">
          <template slot-scope="scope">{{ scope.row.stock }}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button
              :loading="$store.state.isLoading"
              size="mini"
              @click="addShops(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row v-if="showType == 'list'" class="list_ul">
        <el-row>
          <el-col
            :span="8"
            v-for="(item, index) in shopsList.data"
            :key="index"
            class="list_card"
          >
            <el-card :body-style="{ padding: '0px' }">
              <div @click="addShops(item)">
                <img
                  :src="
                    item.piclink == ''
                      ? require('../../assets/img/productDefault.jpg')
                      : $fnc.getImgUrl(item.piclink)
                  "
                  class="image"
                />
                <div class="card_list">
                  <span class="hid_text">{{ item.title }}</span>
                  <p class="price_card">现价：{{ item.price }}</p>
                  <div v-if="item.label && item.label.length > 0">
                    <el-tag
                      v-for="(label, l) in item.label"
                      style="margin-right: 5px; color: #ffffff; margin-left: 0"
                      size="mini"
                      :key="l"
                      effect="dark"
                      >{{ label }}</el-tag
                    >
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-row>

      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="shopsList.all_num"
            >
            </el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import materialSearch from "@/components/currency/xz_shop_search.vue";
export default {
  name: "xzShop",
  components: {
    materialSearch,
  },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    showType: {
      type: String,
      default: "table",
    },
    isAll: {
      type: Boolean,
      default: false,
    },
    isAddIden: {
      type: Boolean,
      default: false,
    },
    isAllSearch: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      shopsList: this.$store.state.shopSlist,
      currentPage1: 1,
      pageSize: 10,
      dialogTableVisible: this.show,
      loading: false,
      searchAll: {
        is_supplier: "3",
        show: "1",
      },
    };
  },
  methods: {
    getSearch(obj) {
      this.loading = true;
      this.searchAll = obj;
      var _this = this;
      if (this.$route.path == "/index/tour") {
        obj.types = 9;
        obj.iden = "tour"; //旅游电商
      }
      if (this.$route.path == "/index/page/vip") {
        // obj.is_supplier = 2;
        if (this.isAddIden) {
          obj.iden = this.$route.query.action || "home"; //商城首页
        }
      }

      if (this.$route.path == "/index/page/member") {
        obj.iden = "vip"; //会员商城首页
      }

      if (this.$route.path == "/index/page/merchant") {
        obj.is_supplier = 1;
        obj.iden = "supplier"; //供应商首页
      }

      if (this.$route.path == "/index/shop/upgrade") {
        obj.is_supplier = 3;
        obj.show = 1;
      }

      this.$store.dispatch("getShopsAll", obj).then(function () {
        _this.loading = false;
      });
    },
    getShopsAll(page, page_size) {
      this.loading = true;
      console.log("!");
      this.$store.dispatch("getShopsAll", { page, page_size, show: "1" });
      this.loading = false;
    },
    addShops(row) {
      console.log(row);
      row.url_title = "商品选择";
      this.$emit("sendShop", row);
      this.closeDio();
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      console.log("!");
      this.$store.dispatch("getShopsAll", params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      console.log("!");
      this.$store.dispatch("getShopsAll", params);
    },
    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    },
  },
  watch: {
    show(val1, val2) {
      if (val1 == val2) {
        return;
      }
      if (this.$route.path == "/index/shop/upgrade") {
        this.searchAll.is_supplier = 3;
        this.searchAll.show = 1;
      }

      if (this.$route.path == "/index/page/merchant") {
        this.searchAll.is_supplier = 1;
        this.searchAll.iden = "supplier";
      }

      if (this.$route.path == "/index/tour") {
        this.searchAll.iden = "tour"; //旅游电商
      }
      if (this.$route.path == "/index/page/vip") {
        if (this.isAddIden) {
          this.searchAll.iden = this.$route.query.action || "home"; //商城首页
        }
      }

      if (this.$route.path == "/index/page/member") {
        this.searchAll.iden = "vip"; //会员商城首页
      }

      this.$store.dispatch("getShopsAll", this.searchAll);
      this.dialogTableVisible = val1;
      this.currentPage1 = 1;
    },
    dialogTableVisible(val1, val2) {
      if (val1 == val2) {
        return;
      }
      this.$emit("isshow", val1);
    },
    getMaterial(val) {
      this.shopsList = val;
    },
  },
  computed: {
    getMaterial() {
      return this.$store.state.shopSlist;
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.list_ul {
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
  height: 150px;
}
.price_card {
  color: red;
}
.image {
  height: 200px;
  max-width: none;
  max-height: none;
}
</style>
